<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>运动会</title>

  <link href="/css/common.css" rel="stylesheet">
  <link href="/css/index.css" rel="stylesheet">

  <% include common/main-lib.ejs %>
</head>
<body>

<div id="app">
  <el-container>
    <el-header>
      <% include common/header.ejs %>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <% include common/aside.ejs %>
      </el-aside>
      <el-container>
        <el-main>
          <h1><%= pageName %></h1>
          <el-row type="flex" class="row-bg" justify="space-around">
            <el-table
              :data="players"
              style="width: 100%"
              :default-sort = "{prop: 'date', order: 'descending'}"
            >
              <el-table-column
                type="index"
                fixed>
              </el-table-column>
              <el-table-column
                prop="playerId"
                label="学号"
                sortable
                fixed>
              </el-table-column>
              <el-table-column
                prop="playerName"
                label="姓名"
                fixed>
              </el-table-column>
              <el-table-column
                prop="playerSexName"
                label="性别">
              </el-table-column>
              <el-table-column
                prop="playerClass"
                label="班级"
                sortable>
              </el-table-column>
              <el-table-column
                prop="playerPhone"
                label="电话">
              </el-table-column>
              <el-table-column
                prop="trackEventName"
                label="径赛">
              </el-table-column>
              <el-table-column
                prop="fieldEventName"
                label="田赛">
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="deleteOne(scope.row.playerId)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
    <el-footer>田径运动会管理系统</el-footer>
  </el-container>
</div>

<script>
  new Vue({
    el: '#app',
    data () {
      return {
        players: [],
        playerList: [],
        eventList: []
      }
    },
    methods: {
      deleteOne(id) {
        let _this = this;
        console.log(id)
        axios.post('/delete', {
          target: "player",
          id
        })
          .then(function (response) {
            if (response.data.status === 200) {
              location.href = "/playerList"
            }
          })
          .catch(function (error) {
            console.log(error)
            _this.$alert('服务器错误，请稍后重试', {
              confirmButtonText: '确定',
              type: 'error'
            })
          });
      },
      formatter(row, column) {
        return row.address;
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      getEventList() {
        return axios.get('/list/event');
      },
      getPlayerList() {
        return axios.get('/list/player');
      },
      toEventList(response) {
        if (response.data.status === 200) {
          this.eventList = response.data.data;
        } else {
          console.log(error)
          this.$alert('服务器错误，请稍后重试', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      },
      toPlayerList(response) {
        if (response.data.status === 200) {
          this.playerList = response.data.data;
        } else {
          console.log(error)
          this.$alert('服务器错误，请稍后重试', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      },
      id2name(id) {
        let name = "";
        this.eventList.forEach(e => {
          if (e.eventId === id) {
            name = e.eventName;
          }
        })
        return name;
      },
      toPlayers() {
        let _this = this;

        this.players = this.playerList.map(e => {
          return Object.assign(e, {
            playerSexName: e.playerSex === "0" ? "女" : "男",
            trackEventName: _this.id2name(e.trackEvent),
            fieldEventName: _this.id2name(e.fieldEvent)
          })
        })
      }
    },
    created() {
      let _this = this;

      axios.all([_this.getEventList(), _this.getPlayerList()])
        .then(axios.spread(function (eventList, playerList) {
          _this.toEventList(eventList);
          _this.toPlayerList(playerList);
          _this.toPlayers();
        }));
    }
  })
</script>
</body>
</html>
